<template>
    <div id="data-procedure">
        <el-row class="search-bar">
            <el-form label-position="right" label-width="100px" :model="searchParams">
                <el-col :span="5">
                    <el-form-item label="类型:">
                        <el-select v-model="searchParams.executeType" style="width: 100%" clearable size="mini">
                            <el-option v-for="(value, key) in ExecuteType" :key="value" :label="value" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="执行日期:">
                        <el-date-picker
                            v-model="searchParams.execStartDate"
                            type="date"
                            size="mini"
                            style="width: 100%"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="执行状态:">
                        <el-select v-model="searchParams.executeState" style="width: 100%" clearable size="mini">
                            <el-option v-for="(value, key) in ExecuteState" :key="value" :label="value" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="5" :offset="4" style="text-align: right">
                    <el-button size="mini" type="primary" @click="handleBtn('search')">查询</el-button>
                    <el-button size="mini" @click="handleBtn('reset')">重置</el-button>
                    <el-button size="mini" @click="handleBtn('refresh')">刷新</el-button>
                </el-col>
            </el-form>
        </el-row>

        <RiskTableP
            ref="risk-table"
            :tableConfig="tableConfig"
            :tableData="tableData"
            :column="columns"
            :searchParams="searchParams"
            :paging="paging"
            v-loading="tableLoading"
            @page-change="getTableData"
            :key="tableKey"
            style="height: calc(100% - 70px)"
        >
        </RiskTableP>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { Component, Vue } from 'vue-property-decorator';
import { ColumnVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { dateFormat, timeFormat } from '@/utils/tools';
import API from './api/data-procedure';
import { ExecuteDTO, ExecuteVO, ExecuteRepVO } from './vo/data-procedure';
import Dict from './dict/index';

@Component({ name: 'DataProcedure', components: { RiskTableP } })
export default class DataProcedure extends Vue {
    Dict = new Dict();

    ExecuteType: any = Dict.ExecuteType;
    ExecuteState: any = Dict.ExecuteState;

    searchParams: ExecuteDTO = {
        executeType: '',
        execStartDate: '',
        executeState: '',
        sort: '',
    };
    paging: PageVO = { currentPage: 1, pageSize: 25, total: 0 };
    tableLoading: boolean = false;
    tableConfig: TableConfigVO = {
        rowKey: 'positionId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: ExecuteVO[] = [];
    columns: ColumnVO[] = [
        {
            title: '序号',
            field: 'positionId',
            width: 110,
        },
        {
            title: '类型',
            field: 'executeType',
            width: 110,
            render: value => this.ExecuteType[value],
        },
        {
            title: '名称',
            field: 'executeName',
        },
        {
            title: '执行日期',
            field: 'dtCtDate',
            sortable: true,
            sortField: 'D_DT_CT_DATE',
            align: 'center',
            width: 120,
            render: (value, record) => dateFormat(value),
        },
        {
            title: '执行时间',
            field: 'dtCtTime',
            sortable: true,
            sortField: 'D_DT_CT_TIME',
            align: 'center',
            width: 120,
            render: (value, record) => timeFormat(value),
        },
        {
            title: '执行状态',
            field: 'executeState',
            width: 110,
            render: value => this.ExecuteState[value],
        },
        {
            title: '错误原因',
            field: 'errorMsg',
        },
    ];
    tableKey: number = 0;

    async mounted() {
        this.getTableData();
        window.addEventListener('message', this.refresh);
    }

    destroyed() {
        window.removeEventListener('message', this.refresh);
    }

    refresh(event) {
        if (event.data === 'Refresh') {
            console.log('vue-Refresh!');
            window.location.reload();
        }
    }

    /**
     * 表格数据
     */
    getTableData(): void {
        this.tableLoading = true;
        API.getDataProcedureList({ ...this.searchParams, paging: this.paging })
            .then((res: ExecuteRepVO) => {
                this.tableData = res?.list || [];
                this.paging.total = res?.total || 0;
                this.tableLoading = false;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    /**
     * 按钮点击事件
     */
    handleBtn(operation: string, row): void {
        if (operation == 'search') {
            this.paging.currentPage = 1;
            this.getTableData();
        } else if (operation == 'refresh') {
            this.getTableData();
        } else if (operation == 'export') {
            // const checkedKeys = (this.$refs['risk-table'] as any).checkRowKeys;
            // const url = this.type === 'today' ? '/event/report/export' : '/event/history/report/export';
            // downLoadFile({
            //     url,
            //     method: 'post',
            //     data: checkedKeys.length ? { resultIds: checkedKeys } : this.searchParams,
            // });
            // this.$nextTick(() => {
            //     (this.$refs['risk-table'] as any).resetCheckRowKeys();
            // });
        } else if (operation === 'reset') {
            this.reset();
            this.paging.currentPage = 1;
            this.getTableData();
        }
    }

    reset(): void {
        this.searchParams = {
            executeType: '',
            execStartDate: '',
            executeState: '',
            sort: '',
        };
    }
}
</script>
<style lang="scss" scoped>
#data-procedure {
    height: 100%;
    padding: 0 5px;
    overflow: hidden;

    .search-bar {
        border: 1px solid #d7d7d7;
        margin: 10px 0;
        padding: 0 5px;
        height: 50px;
        line-height: 50px;
    }
}

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}

.el-form-item {
    // margin-bottom: 10px;
    /deep/.el-form-item__label {
        color: #000;
    }
}
/***  collapse-tags样式 ***/
</style>
